<template>
    <div class="banner-container">
        <el-carousel height="400px" :interval="5000">
            <el-carousel-item v-for="(item, index) in websiteConfig.carouselItems" :key="index">
                <div class="banner-content">
                    <a :href="item.link" target="_blank">
                        <img :src="item.image" alt="banner" class="banner-image" />
                    </a>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup lang="ts">
import { websiteConfig } from '../config';
</script>

<style scoped>
.banner-container {
    margin-top: 60px;
}

.banner-content {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

:deep(.el-carousel__indicators) {
    bottom: 30px;
}

:deep(.el-carousel__button) {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
}

@media screen and (max-width: 768px) {
    .el-carousel {
        height: 400px !important;
    }
}
</style>